<template>
  <view class="container">
    <!-- 顶部组件 -->
    <u-navbar
      id="nav-bar"
      :is-back="true"
      :background="{ background: '#fff' }"
      :border-bottom="false"
      title="信用卡办理"
    ></u-navbar>

    <view class="content">
      <u-form :model="form" ref="uForm" label-width="140">
        <u-form-item label="称呼">
          <u-input
            class="input"
            v-model="form.salutation"
            @input="salutationInput"
            placeholder="请输入称呼"
          />
        </u-form-item>
        <u-form-item label="联系电话">
          <u-input
            class="input"
            v-model="form.contact"
            placeholder="请输入联系电话"
            @input="contactInput"
          />
        </u-form-item>
        <u-form-item label="地址">
          <u-input
            class="input"
            v-model="form.address"
            placeholder="请输入地址"
            @input="addressInput"
          />
        </u-form-item>
      </u-form>
    </view>
    <view class="btnBox">
      <view class="btn" @click="submit">提交</view>
    </view>
  </view>
</template>

<script>
import service from '@/common/service.js';
import util from '@/common/utils';

export default {
  data() {
    return {
      form: { salutation: '', contact: '', address: '' },
      canSubmit: false,
    };
  },
  methods: {
    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    checkValue() {
      if (!this.form.salutation) {
        util.showToast('称呼不能为空');
        return false;
      }
      if (!this.form.contact) {
        util.showToast('联系电话不能为空');
        return false;
      }
      if (!this.form.address) {
        util.showToast('地址不能为空');
        return false;
      }
      this.canSubmit = true;
      return true;
    },
    submit() {
      if (!this.checkValue()) {
        return;
      }
      const that = this;
      const params = {
        salutation: that.form.salutation,
        smsCode: that.form.code,
        pwd: md5.md5(that.form.contact),
      };
      service.memberSetForgetPwd(
        params,
        function (res) {
          if (res && res.data) {
            util.showToast('修改成功，正在跳转');
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 2000);
          } else {
            util.showToast(res.message || '修改失败');
          }
        },
        function (res) {
          util.showToast(res.message || '修改失败');
        }
      );
    },
    gotoLogin() {
      uni.navigateBack({
        delta: 1,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  padding: 30rpx;
  background-color: #f5f5f5;
}

.content {
  width: 100%;
  padding: 0 30rpx;
  background-color: #fff;
  border-radius: 10rpx;

  .sendCodeBtn {
    width: 180rpx;
    font-size: 28rpx;
    font-weight: normal;
    color: #b7926e;
    text-align: right;
  }
}

.btnBox {
  position: absolute;
  left: 0;
  bottom: 74rpx;
  width: 100%;
  height: 88rpx;
  padding: 0 30rpx;
  .btn {
    line-height: 88rpx;
    font-size: 28rpx;
    font-weight: normal;
    color: #ffffff;
    background: linear-gradient(90deg, #332108, #201403);
    border-radius: 20rpx;
    text-align: center;
  }
}
</style>
